<!-- filepath: frontend/src/pages/TestCaseEditor.vue -->
<template>
    <div>
      <el-page-header content="测试用例设计" />
      <el-card>
        <el-button type="primary" @click="addStep">添加步骤</el-button>
        <draggable v-model="steps" item-key="id">
          <template #item="{element}">
            <el-card>
              <el-select v-model="element.type" placeholder="步骤类型">
                <el-option label="打开页面" value="open" />
                <el-option label="点击元素" value="click" />
                <el-option label="输入文本" value="input" />
                <el-option label="断言" value="assert" />
              </el-select>
              <el-input v-model="element.selector" placeholder="元素定位符" v-if="element.type !== 'open'" />
              <el-input v-model="element.value" placeholder="输入内容" v-if="element.type === 'input'" />
              <el-input v-model="element.assert" placeholder="断言内容" v-if="element.type === 'assert'" />
              <el-button @click="removeStep(element)">删除</el-button>
            </el-card>
          </template>
        </draggable>
        <el-button type="success" @click="saveCase">保存用例</el-button>
      </el-card>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue';
  import draggable from 'vuedraggable';
  const steps = ref([]);
  function addStep() {
    steps.value.push({ id: Date.now(), type: '', selector: '', value: '', assert: '' });
  }
  function removeStep(step) {
    steps.value = steps.value.filter(s => s.id !== step.id);
  }
  function saveCase() {}
  </script>